{% extends 'dms_console.html' %}

{% block stylecontent %}
    <style>
        .parent {
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            /* height: 600px; 设置父容器高度 */
        }
    </style>
{% endblock %}

{% block maincontent %}
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-card-header layuiadmin-card-header-auto parent"><h2>一键导出</h2></div>
            <div class="layui-card-body parent">
                <form class="layui-form">
                    <div class="layui-form-item layui-row">
                        <label class="layui-form-label">上线日期</label>
                        <div class="layui-input-block" style="width: 300px;">
                            <select id="online_date" name="online_date" lay-search>
                                <option value="">直接或搜索选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">责任人</label>
                        <div class="layui-input-block" style="width: 300px;">
                            <input type="text" id="principal" name="principal" placeholder="责任人"
                                   class="layui-input"
                                   lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">创建人</label>
                        <div class="layui-input-block" style="width: 300px;">
                            <input type="text" id="created_by" name="created_by" placeholder="创建人IP"
                                   class="layui-input"
                                   lay-affix="clear">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layuiadmin-btn-list layui-btn-normal"
                                    id="exportAllBtn"
                                    lay-submit lay-filter="export">
                                <i class="layui-icon layui-icon-export layuiadmin-button-btn"></i>导出
                            </button>
                            <button class="layui-btn layuiadmin-btn-list layui-btn-primary" type="reset"
                                    id="customReset">
                                <i class="layui-icon layui-icon-set-sm layuiadmin-button-btn"></i>重置
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        layui.use(['layer', 'form'], function () {
            // var $ = layui.jquery;
            var $ = layui.$;
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;

            // 初始化时加载下拉框数据
            $.ajax({
                url: '/dms/api/getOneClickExportOnlineDate',
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        var html = '<option value="">直接或搜索选择</option>';
                        $.each(res.data, function (index, item) {
                            html += '<option value="' + item.online_date + '">' + item.online_date + '</option>';
                        });
                        $('#online_date').html(html);
                        $('#online_date_template').html(html);
                        // 重新渲染表单
                        form.render('select');
                    }
                },
                error: function () {
                    layer.msg('数据加载失败');
                }
            });

            // 数据导出
            form.on('submit(export)', function (data) {
                layer.confirm('导出当前查询条件的所有数据吗？', function (index) {
                    layer.close(index);
                    layer.msg('正在生成文件...', {icon: 16, time: 1500});
                    // 创建隐藏的iframe实现下载
                    setTimeout(function () {
                        var principal2 = $('#principal').val();
                        var online_date2 = $('#online_date').val();
                        var created_by2 = $('#created_by').val();

                        var exportUrl = '/dms/api/oneClickExportToZip?';

                        exportUrl += 'principal' + '=' + encodeURIComponent(principal2) + '&';
                        exportUrl += 'online_date' + '=' + encodeURIComponent(online_date2) + '&';
                        exportUrl += 'created_by' + '=' + encodeURIComponent(created_by2);

                        var iframe = document.createElement('iframe');
                        iframe.style.display = 'none';
                        iframe.src = exportUrl;
                        document.body.appendChild(iframe);

                        // 下载完成后移除iframe
                        setTimeout(function () {
                            document.body.removeChild(iframe);
                            layer.msg('导出成功！');
                        }, 2000);
                    }, 1500);
                });
                return false;
            });

        });
    </script>
{% endblock %}
